<template>
    <div>

        <el-card>

            <el-row>
                <el-page-header @back="goBack" content="订单详情">
                </el-page-header>
            </el-row>

            <el-divider></el-divider>
            <el-row style="margin-top: 20px">
                <el-col :span="18">
                    <el-tag size="medium" type="danger" v-if="this.order.status===0">已取消</el-tag>
                    <el-tag size="medium" type="success" v-if="this.order.status===1">未付款</el-tag>
                    <el-tag size="medium" v-if="this.order.status===2">已付款</el-tag>
                    <el-tag size="medium" type="warning" v-if="this.order.status===3">待发货</el-tag>
                    <el-tag size="medium" type="success" effect="dark" v-if="this.order.status===4">已发货</el-tag>
                    <el-tag size="medium" type="warning" v-if="this.order.status===5">待签收</el-tag>
                    <el-tag size="medium" type="success" effect="dark" v-if="this.order.status===6">已签收</el-tag>
                    <el-tag size="medium" type="info" v-if="this.order.status===7">未评价</el-tag>
                    <el-tag size="medium" type="success" effect="dark" v-if="this.order.status===8">已评价</el-tag>
                </el-col>

                <el-col :span="6">
                    <span>操作时间：{{ this.order.createTime }}</span>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="20" style="font-size: 13px">订单号: {{ this.order.number }}</el-col>
                <el-col :span="4" v-if="this.ordersProduct.status === 1">
                    <el-button
                            type="primary" icon="el-icon-s-goods"
                            @click="handleSendButton()">发货
                    </el-button>
                </el-col>
                <el-col :span="4" v-if="this.ordersProduct.status === 2">
                    <el-tag size="medium" effect="dark">已发货</el-tag>
                </el-col>
                <el-col :span="4" v-if="this.ordersProduct.status === 4">
                    <el-tag size="medium" effect="dark">已收货</el-tag>
                </el-col>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">收货人信息</span>
                </div>
                <div style="margin: 10px">
                    <span>收货人： {{ this.account.name }}</span>
                </div>
                <div style="margin: 10px">
                    <span>联系方式： {{ this.account.phone }}</span>
                </div>
                <div style="margin: 10px">
                    <span>收货地址： {{ this.account.address }}</span>
                </div>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">付款信息</span>
                </div>
                <div style="margin: 10px">
                    <span>支付方式：在线支付</span>
                </div>
                <div style="margin: 10px">
                            <span>支付状态：
                                <el-tag v-if="this.order.payStatus === 0" type="danger">未支付</el-tag>
                                <el-tag v-if="this.order.payStatus === 1" type="success">已支付</el-tag>
                            </span>
                </div>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">配送方式</span>
                </div>
                <div style="margin: 10px">
                    <span>配送方式：物流</span>
                </div>
                <div style="margin: 10px">
                            <span>配送状态：
                                <el-tag v-if="this.ordersProduct.status <= 1" type="warning">待发货</el-tag>
                                <el-tag v-if="this.ordersProduct.status > 1">已发货</el-tag>
                            </span>
                </div>
                <!--                <div style="margin: 10px"><span>发货地址：{{ this.order.senderAddress }}</span></div>-->
            </el-row>

            <el-divider></el-divider>

            <template>
                <el-table
                        height="380"
                        :header-cell-style="{fontSize: '14px','text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :data="products"
                        stripe
                        style="width: 100%">
                    <el-table-column width="85" label="序号" type="index" align="center"></el-table-column>

                    <el-table-column label="图片" width="150px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="80" fit="fill" :src="scope.row.image"></el-avatar>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="detail" label="商品介绍" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="price" width="150px" label="单价(元)"
                                     show-overflow-tooltip></el-table-column>
                </el-table>
            </template>
        </el-card>

    </div>
</template>
<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "OrderInfo",
    data() {
        return {
            account: {},
            userId: '',
            orderId: '',
            order: {},
            products: [],
            ordersProduct: {},
            ordersProductId: '',

            statuss: [{
                value: 0,
                label: '已取消'
            }, {
                value: 1,
                label: '未付款'
            }, {
                value: 2,
                label: '已付款'
            }, {
                value: 3,
                label: '待发货'
            }, {
                value: 4,
                label: '已发货'
            }, {
                value: 5,
                label: '待签收'
            }, {
                value: 6,
                label: '已签收'
            }, {
                value: 7,
                label: '未评价'
            }, {
                value: 8,
                label: '已评价'
            }],
            payStatuss: [{             // 存储支付状态
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '已支付'
            }],

        }
    },

    mounted() {


        // 我从管理页面进入的话，可以传入这个订单和商品关系的信息（订单的信息 + 商品的信息）
        // 我只需要根据订单id获取这个用户的信息

        this.ordersProduct = this.$route.params.ordersProduct
        this.ordersProductId = this.ordersProduct.id
        // console.log(this.ordersProduct)

        this.order = this.ordersProduct.orders
        this.products.push(this.ordersProduct.product)
        this.orderId = this.order.id
        this.userId = this.order.userId

        // 订单ID查找用户的信息
        this.loadUser()

    },
    methods: {

        goBack() {
            this.$router.go(-1)
        },

        handleSendButton() {
            this.$request.post('/ordersProduct/send?id=' + this.ordersProductId).then(res => {
                if (res.code === '200') {
                    this.$message.success('发货成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        loadUser() {
            this.$request.post('/user/getUserById?id=' + this.userId).then(res => {
                console.log(res)
                if (res.code === '200') {
                    this.account = res.data
                } else {
                    this.$message
                        .error(res.msg)
                }
            })
        }


    }
})
</script>


<style scoped>

</style>